<template>
    <div>
        <quill-editor
                ref="myQuillEditor"
                v-model="content"
                :options="editorOption"
                @change="onEditorChange($event)"
                class="editor"/>

        <form action method="post" enctype="multipart/form-data" id="uploadFormMulti">
            <input
                    style="display: none"
                    :id="uniqueId"
                    type="file"
                    name="file"
                    multiple
                    accept="image/jpg, image/jpeg, image/png, image/gif"
                    @change="uploadImg('uploadFormMulti')"/>
        </form>
    </div>

</template>

<script>
    import {uploadImg} from '@/api/business/file'

    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import {quillEditor} from 'vue-quill-editor'
    import Quill from "quill"
    import ImageResize from "quill-image-resize-module" // 引用
    import {ImageDrop} from "quill-image-drop-module"

    //加入以下引用

    Quill.register("modules/imageDrop", ImageDrop)
    Quill.register("modules/imageResize", ImageResize) // 注册

    export default {
        name: 'RichText',
        data() {
            return {
                // 富文本编辑器默认内容
                content: '',
                uniqueId: "uniqueId",
                //富文本编辑器配置
                editorOption: {
                    theme: "snow",
                    placeholder: "分享你的探店经历吧!!!",
                    //  富文本编辑器配置
                    modules: {
                        imageDrop: true,
                        imageResize: {
                            displayStyles: {
                                backgroundColor: "black",
                                border: "none",
                                color: "white"
                            },
                            modules: ["Resize", "DisplaySize", "Toolbar"]
                        },
                        //工具栏定义的
                        toolbar: [
                            [{header: 1}, {header: 2}], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
                            [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
                            [{size: ["small", false, "large", "huge"]}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
                            [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
                            [{color: []}, {background: []}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
                            ["image"] // 链接、图片、视频-----['link', 'image', 'video']
                        ]
                    },
                }
            }
        },
        computed: {
            //当前富文本实例
            editor() {
                return this.$refs.myQuillEditor.quill
            }
        },
        methods: {
            //内容改变事件
            onEditorChange({quill, html, text}) {
                this.content = html
                this.$emit('update:changeHtml', html)
                this.$emit('update:text', text)
            },
            uploadImg: async function () {
                let _this = this
                //构造formData对象
                let formData = new FormData()
                formData.append("file", document.getElementById(_this.uniqueId).files[0])
                try {
                    uploadImg(formData).then(res => {
                        let url = res.data.src
                        let Range = _this.editor.getSelection()
                        //上传文件成功之后在富文本中回显(显示)
                        _this.editor.insertEmbed(
                            Range != null ? Range.index : 0,
                            "image",
                            url
                        )
                        //成功之后,将文件的文本框的value置空
                        document.getElementById(_this.uniqueId).value = ""
                    })
                } catch ({message: msg}) {
                    document.getElementById(_this.uniqueId).value = ""
                    _this.$message.warning(msg)
                }
            },
            updateHtml(html) {
                let quill = document.getElementsByClassName("ql-editor")[0]
                quill.innerHTML = html
            }
        },
        mounted() {
            let _this = this
            let imgHandler = async function (image) {
                if (image) {
                    let fileInput = document.getElementById(_this.uniqueId) //隐藏的file文本ID
                    fileInput.click() //加一个触发事件
                }
            }
            _this.editor.getModule("toolbar").addHandler("image", imgHandler)


        },
        components: {
            quillEditor
        }
    }
</script>

<style scoped lang='less'>
</style>

<style lang='less'>

    .ql-snow .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
    }

    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
    }

    .ql-snow .ql-tooltip[data-mode="video"]::before {
        content: "请输入视频地址:";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: "14px";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
        content: "10px";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
        content: "18px";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
        content: "32px";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: "文本";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: "标题1";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: "标题2";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: "标题3";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: "标题4";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: "标题5";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: "标题6";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: "标准字体";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
        content: "衬线字体";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
        content: "等宽字体";
    }

    .editor {
        line-height: normal !important;
        height: 500px;
    }

    .ql-toolbar.ql-snow {
        border: 1px solid #EBEEF5;
        background-color: white;
    }

    .ql-container.ql-snow {
        border-color: #EBEEF5;
        height: 450px;
        background-color: white;
    }

    .ql-editor {
        height: 450px;
        background-color: white;
    }


    .ql-snow {
        p {
            font-size: 16px;
            font-weight: 300;
            line-height: 1.8;
            text-align: justify;
        }

        li {
            font-weight: 300;
            padding: 4px 0;
        }

        /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */

        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        menu,
        nav,
        section {
            display: block;
        }

        /* HTML5 媒体文件跟 img 保持一致 */

        audio,
        canvas,
        video {
            display: inline-block;
        }

        /* 要注意表单元素并不继承父级 font 的问题 */

        button,
        input,
        select,
        textarea {
            font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei,
            Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
        }

        button::-moz-focus-inner,
        input::-moz-focus-inner {
            padding: 0;
            border: 0;
        }

        /* 去掉各Table cell 的边距并让其边重合 */

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* 去除默认边框 */

        fieldset,
        img {
            border: 0;
        }

        /* 块/段落引用 */

        blockquote {
            position: relative;
            color: #999;
            font-weight: 400;
            border-left: 1px solid #1abc9c;
            padding-left: 1em;
            margin: 1em 3em 1em 2em;
        }

        @media only screen and (max-width: 640px) {
            blockquote {
                margin: 1em 0;
            }
        }

        /* Firefox 以外，元素没有下划线，需添加 */

        acronym,
        abbr {
            border-bottom: 1px dotted;
            font-variant: normal;
        }

        /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */

        abbr {
            cursor: help;
        }

        /* 一致的 del 样式 */

        del {
            text-decoration: line-through;
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        th,
        var {
            font-style: normal;
            font-weight: 400;
        }

        /* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */

        ul,
        ol {
            list-style: none;
        }

        /* 对齐是排版最重要的因素, 别让什么都居中 */

        caption,
        th {
            text-align: left;
        }

        q:before,
        q:after {
            content: '';
        }

        /* 统一上标和下标 */

        sub,
        sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
        }

        :root sub,
        :root sup {
            vertical-align: baseline; /* for ie9 and other modern browsers */
        }

        sup {
            top: -0.5em;
        }

        sub {
            bottom: -0.25em;
        }

        /* 让链接在 hover 状态下显示下划线 */

        a {
            color: #1abc9c;
        }

        a:hover {
            text-decoration: underline;
        }

        a {
            border-bottom: 1px solid #1abc9c;
        }

        a:hover {
            border-bottom-color: #555;
            color: #555;
            text-decoration: none;
        }

        /* 默认不显示下划线，保持页面简洁 */

        ins,
        a {
            text-decoration: none;
        }

        /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
         * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
         * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
         * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
         * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
         */

        u,
        -u {
            text-decoration: underline;
        }

        /* 标记，类似于手写的荧光笔的作用 */

        mark {
            background: #fffdd1;
            border-bottom: 1px solid #ffedce;
            padding: 2px;
            margin: 0 5px;
        }

        /* 代码片断 */

        pre,
        code,
        pre tt {
            font-family: Courier, 'Courier New', monospace;
        }

        pre {
            background: #f8f8f8;
            border: 1px solid #ddd;
            padding: 1em 1.5em;
            display: block;
            -webkit-overflow-scrolling: touch;
        }

        /* 一致化 horizontal rule */

        hr {
            border: none;
            border-bottom: 1px solid #cfcfcf;
            margin-bottom: 0.8em;
            height: 10px;
        }

        /* 底部印刷体、版本等标记 */

        small, -small,
            /* 图片说明 */
        figcaption {
            font-size: 0.9em;
            color: #888;
        }

        strong,
        b {
            font-weight: bold;
            color: #000;
        }

        /* 可拖动文件添加拖动手势 */

        [draggable] {
            cursor: move;
        }

        .clearfix:before,
        .clearfix:after {
            content: '';
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        /* 强制文本换行 */

        .textwrap,
        .textwrap td,
        .textwrap th {
            word-wrap: break-word;
            word-break: break-all;
        }

        .textwrap-table {
            table-layout: fixed;
        }

        /* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */

        .serif {
            font-family: Palatino, Optima, Georgia, serif;
        }

        /* 保证块/段落之间的空白隔行 */

        p,
        pre,
        ul,
        ol,
        dl,
        form,
        hr,
        table,
        -p,
        -pre,
        -ul,
        -ol,
        -dl,
        -form,
        -hr,
        -table,
        blockquote {
            margin-bottom: 1.2em;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei,
            Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
            font-weight: 100;
            color: #000;
            line-height: 1.35;
        }

        /* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        -h1,
        -h2,
        -h3,
        -h4,
        -h5,
        -h6 {
            margin-top: 0.2em;
            margin-bottom: 0.6em;
            line-height: 1.35;
        }

        h1,
        -h1 {
            font-size: 2em;
        }

        h2,
        -h2 {
            font-size: 1.8em;
        }

        h3,
        -h3 {
            font-size: 1.6em;
        }

        h4,
        -h4 {
            font-size: 1.4em;
        }

        h5,
        h6,
        -h5,
        -h6 {
            font-size: 1.2em;
        }

        /* 在文章中，应该还原 ul 和 ol 的样式 */

        ul,
        -ul {
            margin-left: 1.3em;
            list-style: disc;
        }

        ol,
        -ol {
            list-style: decimal;
            margin-left: 1.9em;
        }

        li ul,
        li ol,
        -ul ul,
        -ul ol,
        -ol ul,
        -ol ol {
            margin-bottom: 0.8em;
            margin-left: 2em;
        }

        li ul,
        -ul ul,
        -ol ul {
            list-style: circle;
        }

        /* 同 ul/ol，在文章中应用 table 基本格式 */

        table th,
        table td,
        -table th,
        -table td,
        table caption {
            border: 1px solid #ddd;
            padding: 0.5em 1em;
            color: #666;
        }

        table th,
        -table th {
            background: #fbfbfb;
        }

        table thead th,
        -table thead th {
            background: #f1f1f1;
        }

        table caption {
            border-bottom: none;
        }

        /* 去除 webkit 中 input 和 textarea 的默认样式  */

        -input,
        -textarea {
            -webkit-appearance: none;
            border-radius: 0;
        }

        -em,
        em,
        legend,
        caption {
            color: #000;
            font-weight: inherit;
        }

        /* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */

        -em {
            position: relative;
        }

        -em:after {
            position: absolute;
            top: 0.65em;
            left: 0;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            content: '・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・';
        }

        /* Responsive images */

        img {
            max-width: 100%;
        }

        pre {
            background-color: rgb(44, 40, 39);
            background-color: black;
            border-radius: 5px;
            font-size: 14px;

        }

        code {
            color: rgb(135, 147, 143);
            color: rgb(166, 226, 46);
        }

    }
</style>
